<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
    {% load static %}
  <link href="{% static 'wenda/css/bootstrap.min.css' %}" rel="stylesheet">
  <script src="{% static 'wenda/js/jquery-3.3.1.min.js' %}"></script>
  <script src="{% static 'wenda/js/bootstrap.min.js' %}"></script>
  <style type="text/css">
    .row {
       margin-right: 0px;
       margin-left: 0px;
    }
    .my-big-box{
       margin: 5px 0px 0px 0px;
       background: white;
       padding: 0px 10px 0px 10px;
       overflow: hidden;
    }
    .my-bar-box{
       padding: 7px 15px 0px 5px;
       border-bottom:2px solid #f5f5f5;
       font-size:15px;
    }
    .my-small-box{
       padding: 15px;
       border-bottom:2px solid #f5f5f5;
    }
    /* 疾病 */
    .title{
      color: #333;
      height:20px;
      margin:5px;
      overflow:hidden;
    }
    .dept{
      color: #ff9900;
      margin-left: 5px;
    }
    .brief{
      color: #999;
      height:40px;
      margin:5px;
      overflow:hidden;
    }
    .sym{
      color: #333;
      margin-right: 5px;
    }
    .symptom{
      color: #666;
      height:20px;
      margin:5px;
      overflow:hidden
    }
    /* 症状 */
    /* 药物 */
    /* 输入框设置 */
    textarea{
      height:80px;
      width: 100%;
      background: #cccccc;
      border: none;
      outline:none;
      resize: none;
      overflow-y:auto;
    }
    /* 滚动条框设置 */
    *::-webkit-scrollbar {
      width: 7px;
      border-radius:3px;
    }

    /* 滚动条设置 */
    *::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #555;
    }
    /* 按钮设置 */
    .btn-send{
      width: 50px;
      height: 25px;
      float:right;
      margin:5px 0px 5px 5px;
      background: #212121;
      color: white;
      border: none;
      outline:none;
    }
    .goTop {
        height: 40px;
        width: 40px;
        background: #000000;
        border-radius: 0px;
        position: fixed;
        top: 90%;
        right: 3%;
        display: none;
        padding: 10px;
        text-align: center;
    }
    .goTop span {
        color: #fff;
    }
  </style>
</head>
<body style="background:#f5f5f5">
  <div class="container col-xs-12 col-sm-8 col-sm-offset-2">
    <!--头部开始-->
    <header class="row" style="padding-bottom: 10px;background:#f5f5f5">
      <nav class=""style="text-align:center; padding: 10px;">
        <div class="col-xs-4 col-xs-offset-4" style="font-size: 20px;">
          <a href="{% url 'wenda:index' %}" style="text-decoration:none;color:#333;">医疗问答</a>
        </div>
        <div class="col-xs-1 col-xs-offset-3">
          <a href="{% url 'wenda:login'%}" style="text-decoration:none;color:#333;">
            <img src="{% static 'wenda/images/user.png' %}" style="width:28px; height:28px;">
         </a>
       </div>
      </nav>
    </header>
    <!--头部结束-->
     <!--搜索开始-->
     <div class="row" style="background:#f5f5f5">
         <form action="{% url 'wenda:search_more' data.search_type%}" method="POST" >
         {% csrf_token %}
           <div class="input-group">
               <input type="text" class="form-control" placeholder='搜索{{data.search_type_zh}}' id="search_text" name="search_text">
               <span class="input-group-btn">
                   <button type="submit" class="btn btn-default" style="cursor: default;" onclick="onClick()">搜索</button>
               </span>
           </div><!-- /input-group -->
         </form>
     </div><!--搜索结束-->
    <!--搜索内容组开始-->
    <div class="row" style="margin: 0;">
      <div class="row my-big-box" id={{data.search_type}}>
        <div class="row my-bar-box">
          <p style="float:left">相关{{data.search_type_zh}}</p>
        </div>
        <!--people.js -->
      </div>
    </div><!--搜索内容组结束-->
    <div class="goTop">
        <span class="glyphicon glyphicon-chevron-up"></span>
    </div>
    <div class="row" style="height:20px"></div>
    <!--footer开始-->
    <footer class="row text-center" style="background:#333; height:50px; color:white;padding:20px">
      <p>2020</p>
    </footer><!--footer结束-->
    <div class="row" style="height:50px"></div>
  </div><!--container-->
  <!--底部开始-->
  <div class="container col-xs-12 col-sm-8 col-sm-offset-2" style="height:50px;position: fixed;bottom:0;">
    <a href="{% url 'wenda:wenda' %}">
      <div class="col-xs-6 text-center" style="height:50px;background: #212121;padding-bottom: 0;border-top: 1px solid #f5f5f5;padding:15px;color:white;">
        智能问答
      </div>
    </a>
    <div class="col-xs-6 text-center" style="height:50px;background: white;padding-bottom: 0;border-top: 1px solid #f5f5f5;padding:15px;color:#212121;">
      快速问医
    </div>
  </div><!--底部结束-->
</body>
<script type="text/javascript" src="{% static 'wenda/js/disease.js' %}"></script>
<script type="text/javascript" src="{% static 'wenda/js/symptom.js' %}"></script>
<script type="text/javascript" src="{% static 'wenda/js/drug.js' %}"></script>
<script type="text/javascript" src="{% static 'wenda/js/main.js' %}"></script>
<!--动态加载开始-->
<script type="text/javascript">
  var jsonDate = {{ data|safe }};
  var search_text = jsonDate.search_text;
  var search_type = jsonDate.search_type;
  console.log(jsonDate);
  var disease_page = 0;
  var symptom_page = 0;
  var drug_page = 0;
  var page_size = 5;
  function loadmore(){
    if(search_type=='disease') console.log(getDisease());
    else if (search_type=='symptom') getSymptom();
    else getDrug();
  }
  window.onload = function(){
      setTimeout(function(){
          $(window).scrollTop(0);
          loadmore();
      },10);
  };
  $(window).scroll(function(){
     //滚动条距离顶部的高度
     var scrollTop = $(this).scrollTop();
     //当前页面的总高度
     var scrollHeight = $(document).height();
     //当前可视的页面高度
     var clientHeight = $(this).height();
     if(scrollTop + clientHeight + 1 >= scrollHeight){
       loadmore();
     }
  });
</script><!--动态加载开始-->
</html>
